// 导入 请求

import ajax from '../../../until/request.js'

class Register {
  constructor() {
    this.init()
  }
  init () {
    this.getValue()
    this.register()
    this.regValue()
    this.togglePasswordVisibility()
  }
  // 获取  用户名 账号  密码  r密码 
  getValue () {
    this.registerBtn = document.querySelector("#register")
    this.alert_success = document.querySelector(".alert-success")
    this.alert_danger = document.querySelector(".alert-danger ")
    this.nickname = document.querySelector("#nickname")
    this.username = document.querySelector("#username")
    this.phonenum = document.querySelector("#phonenum")
    this.password = document.querySelector("#password")
    this.rpassword = document.querySelector("#rpassword")
    this.readAndAgree = document.querySelector("#readAndAgree")
  }

  // 前端  正则验证 
  regValue () {
    // 获取 四个 iconfont  放大一个数组里面 
    let yes = document.querySelectorAll(".icon-dui")
    let no = document.querySelectorAll(".icon-cuowu1")
    // 验证规则  传入每个对象
    const validationRules = [
      {
        input: this.nickname,
        regex: /^(?=.*[a-zA-Z0-9])[a-zA-Z0-9]{6,12}$|^[\u4E00-\u9FFF]{2,6}$/,
        index: 0
      },
      {
        input: this.phonenum,
        regex: /^1[3456789]\d{9}/,
        index: 1
      },
      {
        input: this.username,
        regex: /^[a-zA-Z0-9]{6,12}$/,
        index: 2
      },
    ]
    validationRules.forEach(({ input, regex, index }) => {
      input.onblur = () => {
        const isValid = regex.test(input.value)
        const yesElement = yes[index]
        const noElement = no[index]

        if (isValid) {
          yesElement.style.display = "block"
          noElement.style.display = "none"
        } else {
          noElement.style.display = "block"
          yesElement.style.display = "none"
        }

        if (input.value === "") {
          noElement.style.display = "none"
        }
      }
    })

    //验证密码强度
    this.password.oninput = () => {
      // 三种密码强度
      let weak = /\d/g
      let mid = /[a-zA-Z]/g
      let high = /[-+%*#$!/@^&.=]/g
      //  满足条件就加1
      let count = 0
      if (weak.test(this.password.value)) {
        count++
      }
      if (mid.test(this.password.value)) {
        count++
      }
      if (high.test(this.password.value)) {
        count++
      }
      addClass(count)
      // 为密码强度增加类名变化
      function addClass (count) {
        let arr = ["weak", "mid", "high"]
        let strength = document.querySelectorAll("form .cryptographicStrength span i")
        // console.log(strength)
        strength.forEach((item) => {
          item.className = ""
        })
        for (let i = 1; i <= count; i++) {
          strength[i - 1].className = arr[i - 1]
        }
      }
    }
    // 验证俩次密码是否一样
    this.rpassword.onblur = () => {

      if (this.password.value !== this.rpassword.value) {
        no[3].style.display = "block"
        yes[3].style.display = "none"
      } else {
        no[3].style.display = "none"
        yes[3].style.display = "block"
      }
      if (this.rpassword.value == "") {
        no[3].style.display = "none"
        yes[3].style.display = "none"
      }
    }
  }

  togglePasswordVisibility () {

    let toggleIcon = document.querySelectorAll('.toggle-icon')
    toggleIcon.forEach(item => {
      item.addEventListener('click', () => {
        let box = item.parentNode.querySelector("input")
        if (box.type === 'password') {
          box.type = 'text'
          item.classList.remove("icon-kejian")
          item.classList.add("icon-mimabukejian")
        } else {
          box.type = 'password'
          item.classList.add("icon-kejian")
          item.classList.remove("icon-mimabukejian")
        }

      })
    })

  }


  register () {
    this.registerBtn.addEventListener("click", (e) => {
      e.preventDefault()
      // 点击  先获取一下输入的东西
      this.getValue()
      if (
        this.nickname.value == "" ||
        this.username.value == "" ||
        this.password.value == "" ||
        this.rpassword.value == "" ||
        this.phonenum.value == "" ||
        this.readAndAgree.checked == false

      ) {
        this.alert_danger.style.display = "block"
        this.alert_danger.innerHTML = "请填写完整"
        let timeout = setTimeout(() => {
          clearTimeout(timeout)
          this.alert_danger.style.display = "none"
        }, 2000)
        return
      }
      ajax.postPro({
        url: "http://localhost:8888/users/register",
        params: {
          username: this.username.value,
          password: this.password.value,
          rpassword: this.rpassword.value,
          nickname: this.nickname.value,
          phonenum: this.phonenum.value
        }
      }).then(res => {
        console.log(res)
        if (JSON.parse(res).code == 1) {
          let i = 2
          this.alert_success.style.display = "block"
          let timer = setInterval(() => {
            // 显示成功
            this.alert_success.children[0].innerHTML = i
            if (i <= 0) {
              // 跳转
              clearInterval(timer)
              this.alert_success.style.display = "none"
              location.href = "../login/login.html"
            }
            i--
          }, 1000)
        }
        if (JSON.parse(res).code != 1) {
          // 显示失败
          this.alert_danger.style.display = "block"
          this.alert_danger.innerHTML = `${JSON.parse(res).message}`
          setTimeout(() => {
            this.alert_danger.style.display = "none"
          }, 2000)
        }
      })


    })

  }

}
let register = new Register()

export default register